import React from 'react'
import { Typography, List, Checkbox  } from 'antd'
import ProductCategories from '../../helper/productCategories'
const { Title } = Typography

export default function FiterByCatogry({handleFilter}) {
	const Categories = ProductCategories()

	const onChange = (value) => {
		// 将当前选中的值传递给父组件
		handleFilter(value);
	}

	return (
		<>
			<Title level={5}>按照分类筛选</Title>
			<Checkbox.Group onChange={onChange}>
				<List 
					dataSource={Categories}
					renderItem={item=>
						<List.Item>
							<Checkbox value={item._id}>{item.name}</Checkbox>
						</List.Item>
					}
				>
				</List>
			</Checkbox.Group>
			
		</>
	)
}
